<template>
  <ul class="minitree">
    <li v-for="(item, index) in model">
      <div :class="{checked:item.checked}" >
        <i @click="toggle(item)" class="fa" v-if="isParent(item)" :class="item.state==='open'?'fa-caret-down':'fa-caret-right'"></i>
        <span
          class="itemDiv">
        <span @click="click(item,index)">{{ item.text }}</span>
          <!--<span @click="item.checked = !item.checked" :class="{ckecked:item.checked}">{{ item.text }}</span>-->
          <i class="fa fa-check" v-if="item.checked" style="float: right"></i>
      </span>
      </div>
      <Tree
        v-show="item.state==='open'"
        :key="index"
        v-on:checkSubject="checkSubject"
        :model="item.children">
      </Tree>
    </li>
  </ul>
</template>

<script>
  export default {
    name: "minitree",
    props: {
      model: Array,
      current:Number,
    },
    methods: {
      //递归传递消息
      checkSubject(item) {
        //记录层级关系
        item.history.push(this.model.filter(r=>{return item.history[item.history.length-1].data.parentId === r.id})[0])
        this.$emit('checkSubject', item)
      },
      // 判断是否显示
      isParent(item) {
        return item.children && item.children.length > 0
      },
      // 选择该科目
      click(item, index) {
        if(item.children && item.children.length > 0){
          return
        }
        item.checked = !item.checked;
        this.$emit('checkSubject', {item: item,history:[item],is: item.checked})
      },
      toggle: function (item) {
        this.open = !this.open;
        item.state = item.state==='open'?'close':'open'
      },
    }
  }
</script>

<style lang="less">
  .minitree {
    .bold {
      font-weight: bold;
    }
    .itemDiv {
      /*display: inline-block;*/
      width: 100%;
    }
    .fa {
      color: #2d8cf0;
      font-size: .2rem;
    }
    .checked {
      border-bottom: 1px solid #E5E5E5;
    }
    ul {
      padding-left: 1em;
      line-height: 1.5em;
      list-style-type: dot;
    }
  }
</style>
